{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@IcsocUIBundle/Resources/public/css/bootstrap.my.css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div id="fullscreen" style="margin:0 auto;background:#ffffff;">
        {% if is_call_show == 1 %}
            <!-- 显示呼叫中心话务数据Begin -->
            <div class="row" style="margin:1px;">
                {% for key,value in call_center %}
                    <div class="progress" style="height:80px">
                        {% for call in value %}
                            <div class="progress-bar" style="background-color: {{ call.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ call.rate }}">
                                <span class="sr-only"> 10% Complete (success) </span>
                                <span style="font: 180% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important">{{ call.name }}</span><br>
                                <span style="font: 200% Arial; font-size: {{ call.style.fontSize }};color: {{ call.style.fontColor }} !important;" id="{{ call.id }}">0</span>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
            <!-- 显示呼叫中心话务数据End -->
        {% endif %}
        {% if user_type == 0 or user_type == 1 %}
            <!-- 显示技能组话务数据Begin -->
            {% if is_que_show == 1 %}
                <div class="row" style="margin:1px;">
                    {% for key,que in queInfos %}
                        <!-- 创建panel BEGIN-->
                        <div class="panel panel-info" id="que{{ que.id }}">
                            <div class="panel-heading">{{ que.que_name }}</div>
                            <div class="panel-body" style="padding: 2px;">
                                {% for key,value in que_center %}
                                    <div class="progress" style="height:80px">
                                        {% for ques in value %}
                                            <div class="progress-bar" style="width: {{ ques.rate }};background-color: {{ ques.style.background }};box-shadow: none;padding: 3px;line-height: 18px;">
                                                <span class="sr-only"> 10% Complete (success) </span>
                                                <span style="font: 180% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important">{{ ques.name }}</span><br>
                                                <span style="font: 200% Arial; font-size: {{ ques.style.fontSize }};color: {{ ques.style.fontColor }} !important" id="que{{ que.id }}_{{ ques.id }}">0</span>
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endfor %}
                                {% if isEnableGroup == 1 and is_agent_show == 1 and is_agent_group_show == 1 %}
                                    <div class="progress" name="questrip" style="height:100%; padding-left: 0px;" id="que{{ que.id }}_strip"></div>
                                    {% if que.group_info is empty %}
                                        {#<div class="alert alert-block alert-danger">#}
                                        {#<button type="button" class="close" data-dismiss="alert">#}
                                        {#<i class="ace-icon fa fa-times"></i>#}
                                        {#</button>#}
                                        {#<i class="ace-icon fa fa-times"></i>#}
                                        {#该技能组未配置所属业务组#}
                                        {#</div>#}
                                    {% else %}
                                        {% for group in que.group_info %}
                                            <div class="panel panel-info" id="que{{ que.id }}_group{{ group.group_id }}">
                                                <div class="panel-heading">{{ group.group_name }}</div>
                                                <div class="panel-body" style="padding: 2px;">
                                                    <div class="progress" name="strip" data-type="group{{ group.group_id }}_strip" style="height:100%; padding-left: 0px;" id="que{{ que.id }}_group{{ group.group_id }}_strip">
                                                        <div class="progress-bar" style="background-color: {{ agentStyle[1].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                            <span class="sr-only"> 10% Complete (success) </span>
                                                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[1].background }} !important">1</span>
                                                        </div>
                                                        <div class="progress-bar" style="background-color: {{ agentStyle[41].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                            <span class="sr-only"> 10% Complete (success) </span>
                                                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[41].background }} !important">1</span>
                                                        </div>
                                                        <div class="progress-bar" style="background-color: {{ agentStyle[42].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                            <span class="sr-only"> 10% Complete (success) </span>
                                                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[42].background }} !important">1</span>
                                                        </div>
                                                        {% if agent_center.busy.if_hasreason == 1 %}
                                                            {% for busy in agent_center.busy.busy_data %}
                                                                <div class="progress-bar" style="background-color: {{ busy.style.background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                                    <span class="sr-only"> 10% Complete (success) </span>
                                                                    <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ busy.style.background }} !important">1</span>
                                                                </div>
                                                            {% endfor %}
                                                        {% else %}
                                                            <div class="progress-bar" style="background-color: {{ agentStyle[2].background }};box-shadow: none;padding: 3px;line-height: 18px;width: {{ rates.agent_rate }}">
                                                                <span class="sr-only"> 10% Complete (success) </span>
                                                                <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[2].background }} !important">1</span>
                                                            </div>
                                                        {% endif %}
                                                        <div class="progress-bar" style="background-color: {{ agentStyle[5].background }};box-shadow: none;padding: 3px;line-height: 20px;width: {{ rates.agent_rate }}">
                                                            <span class="sr-only"> 10% Complete (success) </span>
                                                            <span  style="padding-top: 10px; font: 200% Arial;background-color: {{ agentStyle[5].background }} !important">1</span>
                                                        </div>
                                                    </div>
                                                    <div name="agentdetail" data-type="group{{ group.group_id }}_agent" id="que{{ que.id }}_group{{ group.group_id }}_agent">
                                                        <span>
                                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[1].background }} !important;background-color:{{ agentStyle[1].background }} !important;color:{{ agentStyle[1].fontColor }} !important;font-size:{{ agentStyle[1].fontSize }}">
                                                                <div>1001[小碗]</div>
                                                                <div>就绪</div>
                                                                <div>00:09:25</div>
                                                            </button>
                                                        </span>
                                                        <span>
                                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[41].background }} !important;background-color:{{ agentStyle[41].background }} !important;color:{{ agentStyle[41].fontColor }} !important;font-size:{{ agentStyle[41].fontSize }}">
                                                                <div>1002[小李]</div>
                                                                <div>振铃</div>
                                                                <div>00:09:25</div>
                                                            </button>
                                                        </span>
                                                        <span>
                                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[42].background }} !important;background-color:{{ agentStyle[42].background }} !important;color:{{ agentStyle[42].fontColor }} !important;font-size:{{ agentStyle[42].fontSize }}">
                                                                <div>1003[小斯]</div>
                                                                <div>通话</div>
                                                                <div>00:09:20</div>
                                                            </button>
                                                        </span>
                                                        {% if agent_center.busy.if_hasreason == 1 %}
                                                            {% for busy in agent_center.busy.busy_data %}
                                                                <span>
                                                                    <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ busy.style.background }} !important;background-color:{{ busy.style.background }} !important;color:{{ busy.style.fontColor }} !important;font-size:{{ busy.style.fontSize }}">
                                                                        <div>1003[小斯]</div>
                                                                        <div>{{ busy.name }}</div>
                                                                        <div>00:09:20</div>
                                                                    </button>
                                                                </span>
                                                            {% endfor %}
                                                        {% else %}
                                                            <span>
                                                                <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[2].background }} !important;background-color:{{ agentStyle[2].background }} !important;color:{{ agentStyle[2].fontColor }} !important;font-size:{{ agentStyle[2].fontSize }}">
                                                                    <div>1003[小斯]</div>
                                                                    <div>置忙</div>
                                                                    <div>00:09:20</div>
                                                                </button>
                                                            </span>
                                                        {% endif %}
                                                        <span>
                                                            <button type="button" class="btn" style="margin: 1px;padding: 1px;width:73px;height:65px;border-color:{{ agentStyle[5].background }} !important;background-color:{{ agentStyle[5].background }} !important;color:{{ agentStyle[5].fontColor }} !important;font-size:{{ agentStyle[5].fontSize }}">
                                                                <div>1003[小斯]</div>
                                                                <div>事后处理</div>
                                                                <div>00:09:20</div>
                                                            </button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endfor %}
                                    {% endif %}
                                {% endif %}
                            </div>
                        </div>
                        <!-- 创建panel END-->
                    {% endfor %}
                </div>
            {% endif %}
            <!-- 显示技能组话务数据End -->
        {% else %}
            <div class="alert alert-block alert-danger">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="ace-icon fa fa-times"></i>
                </button>
                <i class="ace-icon fa fa-times"></i>
                该角色无任何技能组权限
            </div>
        {% endif %}
    </div>
{% endblock %}